{% extends 'csdn_django/csdn_model.html' %}
{% load static %}
{% block title %}
    csdn
{% endblock %}
{% block style %}
    <link rel="stylesheet" href="/static/css/csdn_header.css">
    <link rel="stylesheet" href="/static/css/csdn_content.css">
{% endblock %}
{% block header %}
    {% include 'csdn_django/header_base.html' %}
{% endblock %}
{% block content %}
    <div class="content">
        <div class="layout-menu">
            <div class="layout-menu-main-group">
                <div class="layout-menu-main">
                    <div class="layout-menu-main-item">
                        <a>
                            <div class="layout-menu-item-info">
                                <div class="layout-menu-item-img">
                                    <img src="/static/image/csdn/首页.png">
                                </div>
                                <div class="layout-menu-item-name">首页</div>
                            </div>
                        </a>
                    </div>
                    <div class="layout-menu-main-item">
                        <a>
                            <div class="layout-menu-item-info">
                                <div class="layout-menu-item-img">
                                    <img src="/static/image/csdn/博客.png">
                                </div>
                                <div class="layout-menu-item-name">博客</div>
                            </div>
                        </a>
                    </div>
                    <div class="layout-menu-main-item">
                        <a>
                            <div class="layout-menu-item-info">
                                <div class="layout-menu-item-img">
                                    <img src="/static/image/csdn/下载.png">
                                </div>
                                <div class="layout-menu-item-name">下载</div>
                            </div>
                        </a>
                    </div>
                    <div class="layout-menu-main-item">
                        <a>
                            <div class="layout-menu-item-info">
                                <div class="layout-menu-item-img">
                                    <img src="/static/image/csdn/study.png">
                                </div>
                                <div class="layout-menu-item-name">学习</div>
                            </div>
                        </a>
                    </div>
                    <div class="layout-menu-main-item">
                        <a>
                            <div class="layout-menu-item-info">
                                <div class="layout-menu-item-img">
                                    <img src="/static/image/csdn/社区.png">
                                </div>
                                <div class="layout-menu-item-name">社区</div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="home-content">
            <div class="info">
                <div class="home-box-nav">
                    <div class="box-nav">
                        <ul class="box-nav-list">
                            {% for category in categories %}
                                <li data-category="{{ category }}">
                                    <p>{{ category |capfirst }}</p>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
            <div class="blog-list">
                <div class="home-article">
                    <div class="home-cont-title">
                        <span>精选博客</span>
                    </div>
                    <div class="home-article-cont">
                        {% for datum in data %}
                            <div>
                                <div class="article-item-box">
                                    <div class="article-item">
                                        <a class="user-info">
                                            <span>{{ datum.nickname }}</span>
                                        </a>
                                        <div class="article-item-cont">
                                            <div class="article-item-left">
                                                <a class="article-title word-1" href="{{ datum.url }}">
                                                    {{ datum.title }}
                                                </a>
                                                <a class="article-desc word-1" href="{{ datum.url }}">
                                                    {{ datum.summary | truncatechars:50 }}...
                                                </a>
                                            </div>
                                            <a href="{{ datum.url }}" class="article-item-right">
                                                <img src="{{ datum.cover }}">

                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}

                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}
{% block js %}
    <script src="{% static 'plugins/jQuery/jquery-3.7.1.min.js' %} "></script>
    <script type="text/javascript">
        // 页面加载完成后执行
        $(function () {
            function truncateString(str, length) {
                if (str.length > length) {
                    return str.substring(0, length) + '...';
                }
                return str;
            }
            // 绑定点击事件  
            $(".box-nav-list li").on('click', function () {
                    const category = $(this).data('category');
                    $.ajax(
                        {
                            url: '../api/v1',
                            type: 'get',
                            data: {
                                'q': category
                            },
                            dataType: 'json',
                            success: function (res) {
                                if (res) {
                                    const articles = res['result_vos'];

                                    let html = '';
                                    {#console.log(articles)#}
                                    // 动态生成文章列表
                                    articles.forEach(article => {
                                        let imgTag = '';
                                        if (article.pic_list && article.pic_list[0]) {
                                            imgTag = `<img src="${article.pic_list[0]}" alt="封面">`;
                                        }
                                        html += `
                                        <div class="article-item-box">
                                            <div class="article-item">
                                                <a class="user-info">
                                                    <span>${article.nickname || '匿名用户'}</span>
                                                </a>
                                                <div class="article-item-cont">
                                                    <div class="article-item-left">
                                                        <a class="article-title word-1" href="${article.url || '#'}">
                                                            ${article.title || '无标题'}
                                                        </a>
                                                        <a class="article-desc word-1" href="${article.url || '#'}">
                                                            ${article.description || '暂无描述'}...
                                                        </a>
                                                    </div>
                                                    <a href="${article.url || '#'}" class="article-item-right">
                                                        ${imgTag}
                                                    </a>
                                                </div>
                                            </div>
                                        </div>`;
                                    });
                                    // 清空之前的内容
                                    let content = $('.home-article-cont');
                                    content.empty();
                                    content.append(html);
                                }


                            }
                        }
                    )

                }
            )
            {#当点击了搜索按钮就会跳转#}
            let btn = $('.search-btn');
            btn.on('click', function () {
                window.location.href = '{% url 'search_list' %}'
            })
        })
    </script>
{% endblock %}
